<template>
  <div class="dashboard-container">

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart @checkDate="onCheckDateChange" />
    </el-row>

    <el-row v-if="checkDate" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <company-summary :check-date="checkDate" @company="onCompanyChange" />
    </el-row>

    <el-row v-if="company && company.companyId && checkDate" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <station-summary :company="company" :check-date="checkDate" />
    </el-row>

  </div>
</template>

<script>
import LineChart from './components/LineChart'
import CompanySummary from './components/CompanySummary'
import StationSummary from './components/StationSummary'

export default {
  name: 'DashboardSmskAdmin',
  components: {
    LineChart,
    CompanySummary,
    StationSummary
  },
  data() {
    return {
      checkDate: '',
      company: { companyId: null, companyName: '' }
    }
  },
  methods: {
    onCheckDateChange(val) {
      this.checkDate = val
    },

    onCompanyChange(val) {
      this.company = val
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 5px 32px 5px 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}
</style>
